Built-in Suspense Cache APIをどう使うか
Reactには<Cache>,getCacheForType,useCacheRefreshなどのキャッシュを利用・制御するためのAPIが生えるが,これをどう使えばいいのか考えたい とりあえず前提として,APIの挙動
getCacheForType: <T>(factory: () => T) => T
factoryに対応するデータがキャッシュに既に存在すればそれを返し,なければfactoryを実行して作って返す
取得できる値は後述するCache boundary内で(たとえtransitionによる分岐が発生していても)同一であることが保証されている
Hookではないので,コンポーネントに紐付いた呼び出しであれば何度でも呼べる
<Cache>
このコンポーネントで囲った範囲でCache boundaryを表現する
useCacheRefresh: () => (() => void) & (<T>(seedKey: () => T, seedValue: T) => void)
Cache boundaryで区切られた範囲でキャッシュをパージする関数を返す
seedKeyとseedValueを指定することでキャッシュの初期値を指定できる
この関数はsetStateと同じようにstartTransitionでキャッシュパージをtransitionalな更新にできる
useCacheSignal: () => AbortSignal
Cache boundaryがパージされるときにabortされるAbortSignalを返す
気持ちとしては
<Suspense>のための非同期状態管理はgetCacheForTypeの上でやる
<Cache>で囲っておけばuseCacheRefreshでその範囲の再取得ができる
useCacheSignalを使えば非同期処理の中断を適切に行える
という感じ。
この上にswrみたいなAPIを載せたいが,どうしたらいいか? 時間でrevalidateしたい
キー単位でのmutateをしたい
ちょっと考えた
revalidateしたいのは,Cache boundaryという思想を考えればrefreshしてしまえばいいはず
refreshしたタイミングからまたカウントすればいいよね
これらの値は,それぞれのデータの(鮮度という意味での)足の速さを示しているわけで,データ単位で設定されるべき
mutateしたときは,同じキーを持っている別の場所も変更されてほしい
swrはデフォルトではmutateしたときにrevalidateを走らせる この挙動をCacheの上に載せたとき,revalidateはコンポーネントをsuspendさせるべきか?